<template>
  <div class="work-plan-assessment-container">
    <div class="operation-bar">
      <router-link to="/main/renshi/jixiao/nianyue">
        <el-button type="primary">返回</el-button>
      </router-link>
      <router-link to="/main/renshi/jixiao/nianyue">
        <el-button type="primary">新增</el-button>
      </router-link>
    </div>
    <h2 class="form-title">工作计划考核列表</h2>
    <div class="search-bar">
      <el-input v-model="searchForm.name" placeholder="姓名" style="width: 200px; margin-right: 10px;" />
      <el-input v-model="searchForm.department" placeholder="部门" style="width: 200px; margin-right: 10px;" />
      <el-input v-model="searchForm.position" placeholder="岗位" style="width: 200px; margin-right: 10px;" />
      <el-select v-model="searchForm.year" placeholder="年份" clearable style="width: 120px; margin-right: 10px;">
        <el-option
          v-for="year in years"
          :key="year"
          :label="year"
          :value="year"
        />
      </el-select>
      <el-select v-model="searchForm.month" placeholder="月份" clearable style="width: 120px; margin-right: 10px;">
        <el-option
          v-for="month in 12"
          :key="month"
          :label="month + '月'"
          :value="month"
        />
      </el-select>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button @click="resetSearch">重置</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="year" label="年份" min-width="100" />
      <el-table-column prop="month" label="月份" min-width="100" />
      <el-table-column prop="name" label="姓名" min-width="120" />
      <el-table-column prop="department" label="部门" min-width="150" />
      <el-table-column prop="position" label="岗位" min-width="150" />
      <el-table-column prop="planMadeBy" label="计划拟订" min-width="120" />
      <el-table-column prop="directSuperior" label="直接上级" min-width="120" />
      <el-table-column prop="createTime" label="创建时间" width="180">
        <template v-slot="scope">
          {{ formatDateTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="200">
        <template v-slot="scope">
          <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)" style="color: #F56C6C;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>
  </div>
</template>

<script>
import { getWorkPlanAssessmentList, deleteWorkPlanAssessment } from '@/api/workPlanAssessment'

export default {
  data() {
    return {
      searchForm: {
        name: '',
        department: '',
        position: '',
        year: '',
        month: ''
      },
      years: Array.from({ length: 10 }, (_, i) => new Date().getFullYear() - i),
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      try {
        const response = await getWorkPlanAssessmentList({
          current: this.currentPage,
          size: this.pageSize,
          name: this.searchForm.name,
          department: this.searchForm.department,
          position: this.searchForm.position,
          year: this.searchForm.year,
          month: this.searchForm.month
        })
        this.tableData = response.data.records
        this.total = response.data.total
      } catch (error) {
        this.$message.error('获取列表失败：' + error.message)
      }
    },
    formatDateTime(time) {
      if (!time) return ''
      const date = new Date(time)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    handleView(row) {
      this.$router.push(`/main/renshi/jixiao/nianyue?id=${row.id}&mode=view`)
    },
    handleEdit(row) {
      this.$router.push(`/main/renshi/jixiao/nianyue?id=${row.id}&mode=edit`)
    },
    async handleDelete(row) {
      try {
        await this.$confirm('确认删除该记录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await deleteWorkPlanAssessment(row.id)
        this.$message.success('删除成功')
        this.fetchData()
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除失败：' + error.message)
        }
      }
    },
    handleSearch() {
      this.currentPage = 1
      this.fetchData()
    },
    resetSearch() {
      this.searchForm = {
        name: '',
        department: '',
        position: '',
        year: '',
        month: ''
      }
      this.handleSearch()
    }
  }
}
</script>

<style lang="scss" scoped>
.work-plan-assessment-container {
  padding: 16px;
  min-height: calc(100vh - 32px);
  // background-color: #f5f7fa;
  width: 1200px;
  margin: 0 auto;

  .form-title {
    font-size: 18px;
    color: #2c3e50;
    margin-bottom: 16px;
    text-align: center;
    font-weight: 500;
  }

  .operation-bar {
    position: relative;
    z-index: 10;
    display: flex;
    gap: 8px;

    .el-button {
      padding: 8px 16px;
      height: 32px;
      font-size: 14px;
    }
  }

  .search-bar {
    background: #fff;
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    .el-input,
    .el-select {
      width: 160px;
    }

    :deep(.el-input__inner) {
      height: 32px;
      line-height: 32px;
    }

    .el-button {
      height: 32px;
      padding: 0 16px;
    }
  }

  :deep(.el-table th.el-table__cell.is-leaf){
    background-color: #f5f7fa;
  }

  .el-table {
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 16px;

    :deep(.el-table__header-wrapper) {
      th {
        background-color: #f5f7fa;
        color: #606266;
        font-weight: 500;
        height: 40px;
        // padding: 8px;
        font-size: 14px;
      }
    }

    :deep(.el-table__body-wrapper) {
      td {
        padding: 8px;
        height: 40px;
        font-size: 14px;
      }
    }

    :deep(.el-button--text) {
      padding: 0 8px;
      height: 28px;
      font-size: 14px;

      &:hover {
        color: #66b1ff;
      }

      &.delete-button {
        color: #F56C6C;

        &:hover {
          color: #f78989;
        }
      }
    }
  }

  .pagination-container {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0;

    :deep(.el-pagination) {
      button {
        height: 28px;
        min-width: 28px;
      }

      .el-pagination__sizes {
        height: 28px;
      }

      .el-pager li {
        height: 28px;
        min-width: 28px;
        line-height: 28px;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .work-plan-assessment-container {
    padding: 12px;

    .operation-bar {
      position: static;
      margin-bottom: 12px;
    }

    .search-bar {
      padding: 12px;
      flex-direction: column;
      align-items: stretch;

      .el-input,
      .el-select {
        width: 100%;
      }

      .el-button {
        width: 100%;
      }
    }

    .el-table {
      :deep(.el-table__header-wrapper) {
        th {
          padding: 6px;
        }
      }

      :deep(.el-table__body-wrapper) {
        td {
          padding: 6px;
        }
      }
    }

    .pagination-container {
      :deep(.el-pagination__sizes) {
        display: none;
      }
    }
  }
}
</style>